<template>
    <div id="category">
        <div class="container">
            <van-tabs v-model:active="activeTab" @change="getShopByTypeList">
                <van-tab
                    v-for="item in types"
                    :title="item.name"
                    :name="item.id"
                >
                    <Waterfall
                        :list="shops"
                        :breakpoints="{
                            1200: { rowPerView: 3 },
                            800: { rowPerView: 2 },
                            500: { rowPerView: 2 },
                        }"
                    >
                        <template #item="{ item }">
                            <div
                                class="water-container"
                                @click="handleToProduct(item.id)"
                            >
                                <LazyImg
                                    :url="
                                        'http://localhost:3000/' +
                                        item.product_images[0].url
                                    "
                                />
                                <p class="water-title">{{ item.title }}</p>
                                <p
                                    style="
                                        padding: 4px 8px;
                                        display: flex;
                                        justify-content: end;
                                    "
                                    v-if="item.product_labels.length"
                                >
                                    <van-tag
                                        style="margin: 0 4px"
                                        v-for="labels in item.product_labels"
                                        type="warning"
                                    >
                                        {{ labels.name }}
                                    </van-tag>
                                </p>
                            </div>
                        </template>
                    </Waterfall>
                    <!-- <Waterfall
						:list="shops"
						:breakpoints="{
							1200: { rowPerView: 3 },
							800: { rowPerView: 2 },
							500: { rowPerView: 2 },
						}"
					>
						<template #item="{ item }">
							<div
								class="water-container"
								v-if="item.logo"
								@click="handleToDetail(item.id)"
							>
								<LazyImg
									:url="'http://localhost:3000/' + item.logo"
								/>
								<p class="water-title">{{ item.name }}</p>
								<p
									style="
										padding: 4px 8px;
										display: flex;
										justify-content: end;
										align-items: center;
										color: #666;
										font-size: 14px;
									"
								>
									{{ item.distance }}km
								</p>
							</div>
						</template>
					</Waterfall> -->
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { getProductByShopId, getType } from "@/api/basic";
import { useStore } from "vuex";

const { appContext } = getCurrentInstance();
const { apiUrl } = appContext.config;
const store = useStore();
const router = useRouter();
const types = ref([]);
const shops = ref([]);
const activeTab = ref("");

onMounted(() => {
    getTypeList();
});

const position = computed(() => {
    return store.getters.position;
});

const getTypeList = async () => {
    try {
        const { code, message, result } = await getType();
        if (code != 200) {
            Toast(message);
            return;
        }
        types.value = result;
        if (types.value.length) {
            activeTab.value = types.value[0].id;
            getShopByTypeList();
        }
    } catch (err) {
        console.error(err);
        Toast("网络错误");
    }
};

const getShopByTypeList = async () => {
    try {
        const type = types.value.find((ele) => ele.id === activeTab.value);
        if (!type) {
            shops.value = [];
            return;
        }
        const { code, message, result } = await getProductByShopId({
            id: type.id,
            ...position.value,
        });
        if (code != 200) {
            Toast(message);
            return;
        }
        shops.value = result;
    } catch (err) {
        console.error(err);
        Toast("网络错误");
    }
};

const handleToDetail = (id) => {
    router.push({
        path: "/shop",
        query: {
            id,
        },
    });
};

const handleToSearch = () => {
    router.push({ path: "/search" });
};

const handleToProduct = (id) => {
    router.replace({
        path: "/product",
        query: {
            id,
        },
    });
};
</script>
<style scoped>
#category {
    width: 100%;
    height: 100%;
}

.header {
    width: 100%;
    display: flex;
    align-items: center;

    padding: 8px 0;
}

.header .search-input {
    flex: 1;
    padding: 8px 12px;
    margin-left: 10px;
    border-radius: 10px;
    color: #999;
    background-color: #eee;
}

.header .title {
    color: #00c4b3;
    margin: 0 10px;
}

.water-container {
    border-radius: 6px;
    box-shadow: 0 0 6px 1px #999;
    overflow: hidden;
}

.water-title {
    padding: 6px 10px;
    color: #222;
}
</style>
